<!--
 * @Author       : ionluo(2437403125@qq.com)
 * @Description  :
 * @Date         : 2024-05-11 22:56:57
-->

<template>
  <div class="total-order">
    <common-card title="累计订单量" value="2,157,420">
      <template>
        <div id="total-order-chart" :style="{ width: '100%', height: '100%' }"/>
      </template>
      <template v-slot:footer>
        <span>昨日订单量</span>
        <span class="emphasis">2,000,000</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import commonCardMixins from '@//mixins/commonCardMixins'

let chatResizeFn = _ => {}
export default {
  name: 'TotalOrder',
  mixins: [commonCardMixins],
  data () {
    return {

    }
  },
  mounted () {
    const myChart = this.$echarts.init(document.getElementById('total-order-chart'))
    myChart.setOption({
      xAxis: {
        type: 'category', // 坐标轴类型，值category/value
        show: false, // 隐藏坐标轴
        boundaryGap: false // 两边间距
      },
      yAxis: {
        show: false
      },
      series: [{
        type: 'line',
        data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620],
        areaStyle: { // 面样式
          color: 'purple'
        },
        lineStyle: { // 线样式
          width: 0
        },
        itemStyle: { // 点样式
          opacity: 0
        },
        smooth: true // 平滑过渡
      }],
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    })
    // resize 重绘
    chatResizeFn = myChart.resize
    window.addEventListener('resize', chatResizeFn)
  },
  beforeDestroy () {
    window.removeEventListener('resize', chatResizeFn)
  }
}
</script>
